<template>
    <div>
        <Title :title="title"></Title>
        <div style="height: 150px;" ref="box"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Bar } from '@antv/g2plot';
import Title from './Title.vue';
const title = ref('统计工程使用的设备数量');
import { get } from '@/utils/request.js';
const empData = ref([]);

const box = ref(null);
const barLie = () => {
    const bar = new Bar(box.value, {
        data: empData.value,
        xField: 'value',
        yField: 'type',
        seriesField: 'type',
        xAxis: {
            label: {
                rotate: 50,
                style: {
                    fill: 'white'
                }
            }
        },
        yAxis: {
            label: {

                style: {
                    fill: 'white'
                }
            }
        },
        legend: {
            position: 'top-left',
        },
    });

    bar.render();


};
const getEmpData = async () => {
    //get(url,[])
    let response = await get('dashboard/queryEngineerBindDeviceNumber')
    console.log(response, '9999');
    empData.value = response.data;
}
onMounted(async () => {
    //7调用函数
    await getEmpData();
    //输出图，非此步
    barLie();
})
</script>

<style lang="less"></style>